<template>
  <Header />
  <div class="main-container">
    <div class="content-box">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>
<script lang='ts' setup>
import Header from './Header/index.vue'
</script>

<style lang='scss' scoped>
.main-container {
  display: grid;
  height: calc(100% - $default-header-height);

  .nav-box {
    height: 100%;
    background: $default-bg-color;
    border-radius: $boxRadius;
    padding: 6px;
    box-sizing: border-box;
    display: grid;
    align-content: flex-start;
    row-gap: 5px;

    .link-tap {
      color: #fff;
      text-decoration: none;
      height: $default-header-height;
      line-height: $default-header-height;
      border-radius: $default-box-gap;
      display: flex;
      align-items: center;
      padding: 0 16px;
      font-size: 13px;
      img {
        margin-right: 2px;
        width: 24px;
        height: 24px;
      }
    }

    .router-link-active {
      background: linear-gradient(90deg, #2696ff 0%, #66b6ff 100%);
    }
  }

  .content-box {
    height: 100%;
  }
}
</style>